<!DOCTYPE html>
<html>
<head>
    <title>立方体</title>
    <meta charset='utf-8'>
    <script src="./JS/Vector3.js" type="text/javascript"></script>
    <script src="./JS/tools.js" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    var Points = [];
    function initPoints(){
        Points[0] = new Vector3(100,100,100);
        Points[1] = new Vector3(100,100,-100);
        Points[2] = new Vector3(-100,100,-100);
        Points[3] = new Vector3(-100,100,100);
        Points[4] = new Vector3(100,-100,100);
        Points[5] = new Vector3(100,-100,-100);
        Points[6] = new Vector3(-100,-100,-100);
        Points[7] = new Vector3(-100,-100,100);
    }

    ctx.translate(250,250);
    ctx.scale(1,-1);
    var distance = 500;
    var eyePosition = new Vector3(0,0,700);

    //将各个点顶投影到 屏幕
    function projection(){
        for(var i=0;i<Points.length;i++){
            Points[i].x = Points[i].x*distance/Math.abs(eyePosition.z - Points[i].z);
            Points[i].y = Points[i].y*distance/Math.abs(eyePosition.z - Points[i].z);
        }
    }

    function drawCube(){
        ctx.strokeStyle = getRandomColor();
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(Points[0].x, Points[0].y);
        ctx.lineTo(Points[1].x, Points[1].y);
        ctx.lineTo(Points[2].x, Points[2].y);
        ctx.lineTo(Points[3].x, Points[3].y);
        ctx.lineTo(Points[0].x, Points[0].y);
        ctx.moveTo(Points[4].x, Points[4].y);
        ctx.lineTo(Points[5].x, Points[5].y);
        ctx.lineTo(Points[6].x, Points[6].y);
        ctx.lineTo(Points[7].x, Points[7].y);
        ctx.lineTo(Points[4].x, Points[4].y);
        ctx.moveTo(Points[1].x, Points[1].y);
        ctx.lineTo(Points[5].x, Points[5].y);
        ctx.moveTo(Points[0].x, Points[0].y);
        ctx.lineTo(Points[4].x, Points[4].y);
        ctx.moveTo(Points[2].x, Points[2].y);
        ctx.lineTo(Points[6].x, Points[6].y);
        ctx.moveTo(Points[3].x, Points[3].y);
        ctx.lineTo(Points[7].x, Points[7].y);
        ctx.stroke();
    }

    //应该到屏幕的距离，呈现出前后缩放的效果
    function scaleCube(){
        var cycle = 100;
        var k = 1;
        var s = setInterval(function(){

            if(distance > 700){
                k = -1;
            }

            if(distance < 100){
                k = 1;
            }
            ctx.clearRect(-250,-250,c.width,c.height);
            initPoints();
            projection();
            drawCube();

            distance += 10*k;
        },cycle);
    }

    function rotateX(angle){
        for(var i in Points){
            tempY = Points[i].y;
            Points[i].y = Points[i].y*Math.cos(angle) - Points[i].z*Math.sin(angle);
            Points[i].z = tempY*Math.sin(angle) + Points[i].z*Math.cos(angle);
        }
    }

    function rotateY(angle){
        for(var i in Points){
            tempX = Points[i].x;
            Points[i].x = Points[i].x*Math.cos(angle) - Points[i].z*Math.sin(angle);
            Points[i].z = tempX*Math.sin(angle) + Points[i].z*Math.cos(angle);
        }
    }


    function rotateCube(){
        var cycle = 100;
        var k = 1;
        var d = 0;
        var s = setInterval(function(){
            if(distance > 700){
                k = -1;
            }

            if(distance < 100){
                k = 1;
            }
            ctx.clearRect(-250,-250,c.width,c.height);
            ctx.fillStyle = "#000";
            ctx.fillRect(-250,-250,c.width,c.height);
            initPoints();
            rotateX(d/360*Math.PI*2);
            rotateY(d/360*Math.PI*2);
            projection();
            drawCube();

            distance += 10*k;
            d +=5;
        },cycle);
    }
    //initPoints();
    //projection();
    //drawCube();

    //scaleCube();
    rotateCube();



</script>
</body>
</html>